<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {

        }
    </style>
</head>
<body>
<canvas width="1000" height="400" id="canvas">
    您的浏览器不支持canvas，请更新！
</canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    var str="tarena";
    ctx.font="80px sans-serif";
    ctx.fillStyle="#aaa";
    ctx.strokeStyle="#aaa";
    ctx.textBaseline="top";
    var flag=1;
    var x=0;
    ctx.fillText(str,x,0);
    ctx.strokeText(str,x,0);
    var width=ctx.measureText(str).width;
    setInterval(function () {
        if(x>=1000-width){
            flag=-1;
        }else if(x<=0){
            flag=1;
        }
        x+=flag*1;
        ctx.clearRect(0,0,1000,400);

        ctx.strokeText(str,x,0);
        ctx.fillText(str,x+2,2);
    },13)
</script>
</html>